<template>
  <div class="blog-item">
    <img :src="blogItem.cover" />
    <div class="blog-content-left">
      {{timeFormat(blogItem.post_time)[0]}}
      <div class="divider" />
      {{timeFormat(blogItem.post_time)[1]+'-'+timeFormat(blogItem.post_time)[2]}}
    </div>
    <div class="blog-content-right">
      <span class="blog-title">{{titleCut(blogItem.title)}}</span>
      <br />
      <span>{{contentCut(blogItem.content)}}</span>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  props: {
    blogItem: Object
  },
  methods: {
    titleCut: text => _.truncate(text, { length: 16 }),

    // 去除富文本标签，只保留汉字，并截取前35位
    contentCut: text => _.truncate(_.join(text.match(/[\u4e00-\u9fa5]/g), ""), { length: 35 }),
    timeFormat: time => {
      let date = _.split(time, " ", 2);
      return _.split(date[0], "-", 3);
    }
  }
};
</script>
